<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/vue.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/login.js"></script>

</head>
<body>
    <div id="app">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="学号">
                <el-input v-model="form.userId"></el-input>
              </el-form-item>
            <el-form-item label="班级">
              <el-select v-model="form.userClass" placeholder="请选择活动区域">
                <el-option label="软件技术2221" value="shanghai"></el-option>
                <el-option label="软件技术2222" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
            </el-form-item>
            
            <el-form-item label="兴趣爱好">
              <el-checkbox-group v-model="form.loves">
                <el-checkbox label="美食" name="loves"></el-checkbox>
                <el-checkbox label="运动" name="loves"></el-checkbox>
                <el-checkbox label="高数" name="loves"></el-checkbox>
                <el-checkbox label="英语" name="loves"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="品格">
              <el-radio-group v-model="form.character">
                <el-radio label="良好"></el-radio>
                <el-radio label="优秀"></el-radio>
                <el-radio label="端正"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="喜欢的食物">
              <el-input v-model="form.food.name"></el-input>
            </el-form-item>
           
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交个人信息</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>

    </div>

</body>
<script>
    
    new Vue({
        el:"#app",
        data() {
            return {
                form: {
                    userId: '',
                    userName: '',
                    userClass: '',
                    userBirthDay: '',
                    loves: [],
                    character:null,
                    food:{
                      name:'',
                      
                    }
                }
        }
        },
        methods: {
        onSubmit() {
            console.log("@@")
            this.form.loves = this.form.loves.join(",")
            console.log("@@")

            axios({
                method:"post",
                url:"/user/register",
                data:this.form
            }).then(function(response){
                this.$message({
                    message:"恭喜你，提交成功",
                    type:"succese"
                });
                this.form.loves = response.data.loves.split(",");
            }.bind(this))

        }
        }
    })
</script>
</html>